<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>礼簿 - 登录</title>
    <script src="js/tailwindcss.js"></script>
    <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<script src="js/api.js"></script>
    
    <!-- 配置Tailwind自定义主题（与主应用一致） -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A', // 主色调：喜庆红
                        secondary: '#D4AF37', // 辅助色：金色
                        neutral: '#F9F5F1', // 中性色：米白
                        dark: '#2D2926', // 深色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen font-sans text-dark flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- 登录卡片 -->
        <div class="bg-white rounded-2xl card-shadow overflow-hidden transform transition-custom hover:scale-[1.01]">
            <!-- 顶部装饰 -->
            <div class="bg-primary h-2"></div>
            
            <!-- 登录表单 -->
            <div class="p-8">
                <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
                        <i class="fa fa-book text-primary text-3xl"></i>
                    </div>
                    <h1 class="text-2xl font-bold text-dark">礼簿应用</h1>
                </div>
                
                <form id="loginForm" class="space-y-5">
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="username" required
                                class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                        </div>
                    </div>
                    
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="password" required
                                class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-custom">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow transition-custom text-base">
                        登录
                    </button>
                </form>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="text-center mt-6 text-gray-500 text-sm">
            <p>&copy; 2025 礼簿应用 - 保留所有权利</p>
        </div>
    </div>
    
    <!-- 通知提示 -->
    <div id="notification" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i id="notificationIcon" class="fa fa-check-circle mr-2"></i>
        <span id="notificationMessage"></span>
    </div>

    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        
        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            
            // 切换图标
            togglePassword.querySelector('i').classList.toggle('fa-eye');
            togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
        });
        
        // 登录表单提交处理
        const loginForm = document.getElementById('loginForm');
        
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 简单验证
            if (!username || !password) {
                showNotification('请输入用户名和密码', 'error');
                return;
            }
			
			// 调用后台登录API
			const response = await fetch(API_LOGIN, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({
					username,
					password
				})
			});
			const result = await response.json();
			
            if (response.ok && result.code === 200) {
				// 登录成功处理
				showNotification('登录成功，正在跳转...', 'success');
				
				// 保存令牌（如果有）
				if (result.data) {
					localStorage.setItem('authToken', result.data);
				}
				
				// 登录成功后跳转到主页面
				setTimeout(() => {
					window.location.href = 'index.html';
				}, 1000);
			} else {
				// 登录失败处理
				showNotification(result.msg || '登录失败，请检查用户名和密码', 'error');
			}
        });
        
        // 通知提示功能
        function showNotification(message, type = 'info') {
            const notification = document.getElementById('notification');
            const icon = document.getElementById('notificationIcon');
            const messageEl = document.getElementById('notificationMessage');
            
            // 设置消息和图标
            messageEl.textContent = message;
            
            // 根据类型设置图标
            icon.className = '';
            if (type === 'success') {
                icon.className = 'fa fa-check-circle mr-2';
            } else if (type === 'error') {
                icon.className = 'fa fa-exclamation-circle mr-2';
            } else {
                icon.className = 'fa fa-info-circle mr-2';
            }
            
            // 显示通知
            notification.classList.remove('translate-y-20', 'opacity-0');
            notification.classList.add('translate-y-0', 'opacity-100');
            
            // 3秒后自动隐藏
            setTimeout(() => {
                notification.classList.remove('translate-y-0', 'opacity-100');
                notification.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }
    </script>
</body>
</html>